import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Loading,
  Field,
  Switch,
  Checkbox,
  Input,
  Button,
  Balloon,
  Message,
  Form,
  Select,
  PopConfirm,
} from '@teamix/ui';
import { YunxiaoIcon, Section } from '@alife/devops-ui';
import GuaranteeModal from 'components/guaranteeModal';
import TagForFeature from 'components/tagForFeature';
import BuildRuleModal from '../rulesModal';
import exceed from 'utils/apimap';
import docs from 'utils/docs';
import constants from 'utils/constants';
import Editor from 'components/editor';
import track from 'utils/track';
import { getFeature } from 'utils/features';
import SwitchConfirm from './switchPopConfirm';
import intl from '../../../../../../../../../../locale';

const { pathResource, organization } = window.FORCE;
const isOrgAdmin = organization.user_role === 'ORG_ADMIN' || organization.user_role === 'ORG_OWNER';

const triggerInfo = [
  {
    label: intl.get({
      id: 'code-assets.containers.baseForm.CodeSubmissionTriggersScanning',
      defaultMessage: '代码提交触发扫描',
    }),
    value: 'commit_trigger',
    disabledDetectionTypes: ['precfix_detection'],
  },

  {
    label: intl.get({
      id: 'code-assets.containers.baseForm.MergeRequestsToTriggerScanning',
      defaultMessage: '合并请求触发扫描',
    }),
    value: 'mr_trigger',
    // 禁用
    disabledDetectionTypes: ['dependency_analysis'],
  },
];

const switchAction = {
  coding_guidelines_detection: {
    on: 'turn_on_p3c',
    off: 'turn_off_p3c',
  },

  precfix_detection: {
    on: 'turn_on_precfix',
    off: 'turn_off_precfix',
  },

  sensitive_info_detection: {
    on: 'turn_on_sensitive_info_check',
    off: 'turn_off_sensitive_info_check',
  },

  dependency_analysis: {
    on: 'turn_on_dependency_check',
    off: 'turn_off_dependency_check',
  },

  project_report: {
    on: 'turn_on_chart',
    off: 'turn_off_chart',
  },
};

const { languageOptions } = constants.ENUM;
// 切换回java时，给默认文字：
const java_build_script = intl.get({
  id: 'code-assets.containers.baseForm.CustomizeTheBuildCommandWhich',
  defaultMessage:
    '# 自定义构建命令，支持 maven3.5.2，命令执行目录为代码库根路径，示例如下：\nmvn -B clean package -Dmaven.test.skip=true -Dautoconfig.skip',
});

export default class BaseForm extends Component {
  static propTypes = {
    data: PropTypes.object,
    isLoadingService: PropTypes.bool,
    cardConfig: PropTypes.object,
  };

  static defaultProps = {
    data: {},
    isLoadingService: true,
    cardConfig: {},
  };

  constructor(props) {
    super(props);
    this.field = new Field(this);
    this.dependency_field = new Field(this);
    this.inited = true;
    this.state = {
      isModalOpen: false,
      modalData: {},
      submitting: false,
      whitelistSavedConfirm: false,
      whiteSubmitting: false,
      rulesVisible: false,
      sensitive_info_detection: {
        value: '',
        message: '',
        changed: false,
        whitelistSaveLoading: false,
      },

      // 详情展开项
      expandKeys: [],
      // 记录按钮是否置灰
      disabledBtnKeys: [
        'dependency_analysis',
        'sensitive_info_detection',
        'coding_guidelines_detection',
        'precfix_detection',
      ],
    };
  }

  componentDidMount() {
    const { cardConfig } = this.props;
    const { detectionTypes } = cardConfig;
    detectionTypes.forEach((item) => {
      this.fetchEnabledRulesCount(item);
    });
  }

  UNSAFE_componentWillReceiveProps(newProps) {
    const { data } = newProps;
    if (data && data.sensitive_info_detection && this.inited) {
      this.inited = false;
      this.setState({
        sensitive_info_detection: {
          value: data.sensitive_info_detection.whitelist,
        },
      });
    }
    const curDataExist = this.props.data && this.props.data.dependency_analysis;
    const nextDataExist = newProps.data && newProps.data.dependency_analysis;
    if (!curDataExist && nextDataExist) {
      this.dependency_field.setValue(
        'build_language_version',
        newProps.data.dependency_analysis.build_language_version || '',
      );
      this.dependency_field.setValue(
        'build_language',
        newProps.data.dependency_analysis.build_language || '',
      );
    }
  }

  saveChanges = () => {
    if (this.state.submitting) return;
    this.setState({ submitting: true });
    this.field.validate((errors) => {
      if (!errors) {
        const { data } = this.props;
        this.props.saveInfo(
          {
            integration_service_setting: data,
          },

          () => {
            this.setState({ submitting: false });
          },
        );
      }
    });
  };

  saveChangesByData = (data, okFn = null, failFn = null, itemKey = '') => {
    this.field.validate((errors) => {
      if (!errors) {
        this.props.saveInfo(
          {
            integration_service_setting: data,
          },

          (isSuccess) => {
            const { expandKeys } = this.state;
            // 成功时才将按钮收起
            if (isSuccess) {
              const index = expandKeys.indexOf(itemKey);
              if (index > -1) {
                expandKeys.splice(index, 1);
              }
            }
            this.setState({
              submitting: false,
              expandKeys,
            });
          },
          okFn,
          failFn,
        );
      }
    });
  };

  handleChange = (value, key, type) => {
    const { data } = this.props;
    const curData = JSON.parse(JSON.stringify(data));
    if (type === 'enabled') {
      curData[key][type] = value;
      // precfix_detection 只有mr_trigger
      if (key !== 'precfix_detection') {
        curData[key].commit_trigger = value;
      }
      // dependency_analysis 只有commit_trigger
      if (key !== 'dependency_analysis') {
        curData[key].mr_trigger = value;
      }
    } else {
      const curItemObj = curData[key];
      Object.keys(curItemObj).forEach((item) => {
        if (['commit_trigger', 'mr_trigger'].indexOf(item) > -1) {
          curItemObj[item] = value.indexOf(item) > -1;
        }
      });
      // this.saveChangesByData(curData);
    }
    this.handleEnabledBtn(key);
    this.props.updateData({
      data: curData,
    });
  };

  onConfirmSaveWhitelist = (itemKey) => {
    if (this.state.whiteSubmitting) return;
    const { data } = this.props;
    const curData = JSON.parse(JSON.stringify(data));
    if (this.state[itemKey]) {
      const curItemObj = curData[itemKey];
      if (curItemObj) {
        curItemObj.whitelist = this.removeEmptyLine(this.state[itemKey].value);
        this.setState({
          [itemKey]: {
            value: curItemObj.whitelist || '',
            whitelistSaveLoading: true,
            changed: true,
          },
        });

        this.saveChangesByData(
          curData,
          () => {
            this.setState({
              [itemKey]: {
                value: curItemObj.whitelist,
                whitelistSaveLoading: false,
                changed: false,
              },
            });
          },
          (errRsp) => {
            if (errRsp.cause.indexOf('whitelist') >= 0) {
              let whitelist = errRsp.cause.substring(errRsp.cause.indexOf(':') + 1).trim();
              const errorList = whitelist.replace(new RegExp('@@@', 'g'), ',');
              whitelist = intl.get(
                {
                  id: 'code-assets.containers.baseForm.TheErrorMessageReturnedBecause',
                  defaultMessage: '存在非法格式 {errorList}，请修改后重试',
                },
                { errorList },
              );
              this.setState({
                [itemKey]: {
                  value: curItemObj.whitelist,
                  message: whitelist,
                  whitelistSaveLoading: false,
                  changed: true,
                },
              });
            } else {
              this.setState({
                [itemKey]: {
                  value: curItemObj.whitelist,
                  message: '',
                  whitelistSaveLoading: false,
                  changed: true,
                },
              });
            }
          },
          itemKey,
        );
      }
    }
    this.setState({
      whitelistSavedConfirm: false,
      whiteSubmitting: false,
    });
  };

  onCloseSaveWhitelist = () => {
    this.setState({
      whitelistSavedConfirm: false,
    });
  };

  onVisibleChange = (visible) => {
    this.setState({
      whitelistSavedConfirm: visible,
    });
  };

  modalOkFn = () => {
    const { value, key, type } = this.state.modalData;
    this.handleChange(value, key, type);
    const { expandKeys } = this.state;
    if (!expandKeys.includes(key)) {
      expandKeys.push(key);
    }
    this.setState({
      isModalOpen: false,
      expandKeys,
    });
  };

  checkWhitelistEmpty = (itemKey) => {
    return (
      this.state[itemKey] &&
      this.state[itemKey].value !== undefined &&
      this.state[itemKey].changed !== undefined &&
      this.state[itemKey].changed
    );
  };

  checkWhitelistValid = (itemKey) => {
    if (this.state[itemKey] && this.state[itemKey].value) {
      const lines = this.state[itemKey].value.split('\n');
      for (let i = 0; i < lines.length; i++) {
        if (
          lines[i].trim() === '**' ||
          lines[i].trim() === '/**' ||
          lines[i].trim() === '/**/*' ||
          lines[i].trim() === '/*/**' ||
          lines[i].trim() === '**/*' ||
          lines[i].trim() === '*/**' ||
          lines[i].trim() === '**/**' ||
          lines[i].trim() === '/**/**'
        ) {
          return false;
        }
      }
    }
    return true;
  };

  fetchEnabledRulesCount = (item) => {
    if (item.key !== 'sensitive_info_detection') {
      return;
    }
    exceed
      .fetch({
        api: 'projects.builds.rules.count',
        params: {
          projectId: pathResource.id,
        },

        data: {
          plugin: item.plugin,
        },
      })
      .then((result) => {
        const key = `${item.plugin}_Count`;
        this.setState({
          [key]: result,
        });
      })
      .fail((err) => {
        console.log(err);
      });
  };

  removeEmptyLine = (value) => {
    if (value) {
      const lines = value.trim().split('\n');
      return lines
        .map((line) => line.trim())
        .filter((line) => line !== '')
        .join('\n');
    }
    return value;
  };

  renderWhitelistButton = (itemKey) => {
    const { disabledBtnKeys } = this.state;
    // if (this.checkWhitelistEmpty(itemKey)) {
    if (!this.checkWhitelistValid(itemKey)) {
      return (
        <PopConfirm
          type="danger"
          triggerType="click"
          align="tl"
          title={intl.get({
            id: 'code-assets.containers.baseForm.ConfirmToSaveTheFile',
            defaultMessage: '确认保存文件白名单',
          })}
          content={intl.get({
            id: 'code-assets.containers.baseForm.TheCurrentSettingsDoNot',
            defaultMessage: '当前设置不扫描任何文件，存在敏感信息泄露风险',
          })}
          icon={
            <YunxiaoIcon type="warning-fill" style={{ color: '#ffa003', marginRight: '10px' }} />
          }
          trigger={
            <Button type="primary" loading={this.state[itemKey].whitelistSaveLoading}>
              {intl.get({ id: 'code-assets.containers.baseForm.Save', defaultMessage: '保存' })}
            </Button>
          }
          onConfirm={() => {
            this.onConfirmSaveWhitelist(itemKey);
          }}
          confirmProps={{ loading: this.state.whiteSubmitting }}
          onCancel={this.onCloseSaveWhitelist}
          visible={this.state.whitelistSavedConfirm}
          onVisibleChange={this.onVisibleChange}
        />
      );
    } else {
      return (
        <Button
          type="primary"
          disabled={disabledBtnKeys.includes('sensitive_info_detection')}
          onClick={() => {
            this.onConfirmSaveWhitelist(itemKey);
          }}
          loading={this.state[itemKey].whitelistSaveLoading}
        >
          {intl.get({ id: 'code-assets.containers.baseForm.Save', defaultMessage: '保存' })}
        </Button>
      );
    }
    // } else {
    //   return (<Button type="primary" disabled={disabledBtnKeys.includes('sensitive_info_detection')}>保存</Button>);
    // }
  };

  renderBuildRules(key, plugin, title) {
    const ruleKey = `${plugin}_Count`;
    let enabledCount = 0;
    if (this.state[ruleKey]) {
      enabledCount = this.state[ruleKey];
    }
    return (
      <div className="setting-card-action-rule">
        <div className="setting-card-action-rule-header">
          {intl.get({
            id: 'code-assets.containers.baseForm.DetectionRules',
            defaultMessage: '• 检测规则',
          })}
        </div>
        <div className="setting-card-action-rule-subtitle">
          {intl.get({
            id: 'code-assets.containers.baseForm.CurrentlyEnabled',
            defaultMessage: '当前启用',
          })}
          {enabledCount}
          {intl.get({ id: 'code-assets.containers.baseForm.Rule', defaultMessage: '条规则' })}
          <Button
            style={{ verticalAlign: 'text-bottom', marginLeft: 8 }}
            text
            type="primary"
            onClick={() => this.setState({ rulesVisible: true })}
          >
            {intl.get({ id: 'code-assets.containers.baseForm.See', defaultMessage: '查看' })}
          </Button>
          {/* <Link onClick={() => { console.log('test'); }} >文字链接</Link> */}
        </div>
        <BuildRuleModal
          isModalOpen={this.state.rulesVisible}
          taskName={title}
          taskKey={plugin}
          closeFn={() => {
            this.setState({
              rulesVisible: false,
            });
          }}
        />
      </div>
    );
  }

  // 选择语言
  onChangeLang = (checked) => {
    this.dependency_field.setValue(
      'build_language_version',
      checked ? languageOptions.Java.default : '',
    );
    this.dependency_field.setValue('build_language', checked ? 'Java' : '');
    this.handleEnabledBtn('dependency_analysis');
  };

  // 按钮不置灰
  handleEnabledBtn = (key) => {
    const { disabledBtnKeys } = this.state;
    const index = disabledBtnKeys.indexOf(key);
    index > -1 && disabledBtnKeys.splice(index, 1);
    this.setState({
      disabledBtnKeys,
    });
  };

  saveDependencyForm = () => {
    const { data } = this.props;
    this.dependency_field.validate((errors) => {
      if (!errors) {
        const values = this.dependency_field.getValues();
        const curData = { ...data };
        curData.dependency_analysis.build_language = values.build_language || '';
        curData.dependency_analysis.build_language_version = values.build_language_version || '';
        curData.dependency_analysis.build_script = values.build_script || '';
        this.saveChangesByData(curData, null, null, 'dependency_analysis');
        this.props.updateData({
          data: curData,
        });
      }
    });
  };

  // 代码质量卡片的保存按钮
  saveCodeQualityBtn = (itemKey) => {
    this.saveChangesByData(this.props.data, null, null, itemKey);
  };

  expandDetail = (key) => {
    const { expandKeys } = this.state;
    expandKeys.push(key);
    this.setState({
      expandKeys,
    });
  };

  render() {
    const { isLoadingService, data, cardConfig, org_sensitive_info_detection, wikiEnable } =
      this.props;
    const { isModalOpen, modalData, expandKeys, disabledBtnKeys } = this.state;
    let taskName = '';
    const { title, detectionTypes, isBeta } = cardConfig;
    detectionTypes.forEach((item) => {
      if (item.key === modalData.key) {
        taskName = item.title;
      }
    });
    detectionTypes.forEach((item) => {
      if (item.key === modalData.key) {
        taskName = item.title;
      }
    });
    const whitelistHolder = intl.get({
      id: 'code-assets.containers.baseForm.EnterTheFilePathSeparate',
      defaultMessage: '请输入文件路径，多行以换行隔开',
    });
    const betaTag = isBeta && (<TagForFeature type="primary" tagText="BETA" />);

    // 将wikiEnable加入data数据中
    data.wiki = {
      enabled: wikiEnable,
    };

    return (
      <>
        <Section
          title={
            <span>
              {title} {betaTag}
            </span>
          }
        >
          {isLoadingService ? (
            <div className="service-loading">
              <Loading />
            </div>
          ) : (
            <div className="services-form" id={cardConfig.id}>
              {detectionTypes.map((item) => {
                const curItemObj = data[item.key] || {};
                const langValue = this.dependency_field.getValues().build_language || '';
                const build_script = data[item.key] ? data[item.key].build_script : '';
                const selectLangVersion = data[item.key]
                  ? data[item.key].build_language_version
                  : '';
                const checkboxValue = Object.keys(curItemObj).filter((it) => {
                  return !!(it !== 'enabled' && curItemObj[it]);
                });
                // 是否无触发方式
                const { noTrigger } = item;
                return (
                  <div className="setting-card-item" key={item.key}>
                    <div className="service-item-title setting-card-subtitle">
                      <div className="service-item-title-left">
                        <div className="setting-card-subtitle-title">{item.title}</div>
                        <div className="setting-card-subtitle-desc">
                          {item.desc}
                          {item.introMore ? <>&nbsp;</> : null}
                          {item.introMore ? (
                            <a href={item.introMore} target="_blank" rel="noreferrer">
                              {intl.get({
                                id: 'code-assets.containers.baseForm.LearnMore',
                                defaultMessage: '了解更多',
                              })}
                            </a>
                          ) : null}
                        </div>
                      </div>
                      <div className="service-item-switch-box">
                        {!noTrigger && curItemObj.enabled && !expandKeys.includes(item.key) && (
                          <Button
                            type="primary"
                            style={{ marginRight: 20 }}
                            text
                            onClick={() => {
                              this.expandDetail(item.key);
                            }}
                          >
                            {intl.get({
                              id: 'code-assets.containers.baseForm.ModifySettings',
                              defaultMessage: '修改设置',
                            })}
                          </Button>
                        )}
                        {item.key === 'sensitive_info_detection' &&
                          org_sensitive_info_detection &&
                          org_sensitive_info_detection.forced_control ? (
                            <Balloon.Tooltip
                              align="tl"
                              trigger={<Switch name="switch" checked={curItemObj.enabled} disabled />}
                              style={{ maxWidth: 320 }}
                            >
                              {isOrgAdmin
                                ? '企业已开启强制扫描，如需修改请前往「企业设置-代码内容安全」处理'
                                : '企业已开启强制扫描，请联系企业管理员前往「企业设置-代码内容安全」处理'}
                            </Balloon.Tooltip>
                        ) : (
                          item.key !== 'lsif_service' && (
                            <SwitchConfirm
                              trigger={<Switch name="switch" checked={curItemObj.enabled} />}
                              onChange={(value) => {
                                if (item.key === 'wiki') {
                                  this.props.setExtensionService(value, () => {
                                    this.props.updateProjectData({
                                      wikiEnable: value,
                                    });
                                  });
                                  return;
                                }
                                // 选中需要弹窗
                                if (!value) {
                                  this.handleChange(value, item.key, 'enabled');
                                  this.props.toogleService({
                                    service: item.key,
                                    authorized: value,
                                  });
                                } else if (getFeature('project.setting.services.sub.items.noCommitment')[item.key]) {
                                  this.props.toogleService({
                                    service: item.key,
                                    authorized: value,
                                  });
                                  this.setState({
                                    modalData: {
                                      value,
                                      key: item.key,
                                      type: 'enabled',
                                    },
                                  }, () => {
                                    this.modalOkFn();
                                  });
                                } else {
                                  this.setState({
                                    isModalOpen: true,
                                    modalData: {
                                      value,
                                      key: item.key,
                                      type: 'enabled',
                                    },
                                  });
                                }
                                // 埋点
                                const trackAction = switchAction[item.key]
                                  ? switchAction[item.key][value ? 'on' : 'off']
                                  : '';

                                track({
                                  action: trackAction,
                                  page: 'Repo-Settings-Services',
                                  type: '',
                                  control: '',
                                });
                              }}
                              needPopConfirm={
                                curItemObj.enabled &&
                                (item.key === 'project_report' || item.key === 'wiki')
                              }
                              popConfirmConfig={item.popConfirmConfig}
                            />
                          )
                        )}
                      </div>
                    </div>

                    {!noTrigger && curItemObj.enabled && expandKeys.includes(item.key) ? (
                      <div className="setting-card-action">
                        <div className="setting-card-action-checklist-checktitle">
                          {intl.get({
                            id: 'code-assets.containers.baseForm.TriggerMode',
                            defaultMessage: '• 触发方式',
                          })}
                        </div>
                        <div className="setting-card-action-checklist">
                          <Checkbox.Group
                            itemDirection="hoz"
                            value={checkboxValue}
                            onChange={(value) => {
                              this.handleChange(value, item.key, 'other');
                            }}
                          >
                            {/* 过滤没有提供的项 */}
                            {triggerInfo
                              .filter((item2) => {
                                return !(
                                  item2.disabledDetectionTypes &&
                                  item2.disabledDetectionTypes.includes(item.key)
                                );
                              })
                              .map((item2) => {
                                return (
                                  <Checkbox value={item2.value} key={item2.value}>
                                    {item2.label}
                                  </Checkbox>
                                );
                              })}
                          </Checkbox.Group>
                        </div>
                        {item.key == 'sensitive_info_detection' ? (
                          <div>
                            {this.renderBuildRules(item.key, item.plugin, item.title)}
                            <div className="setting-card-action-whitelist">
                              <div className="setting-card-action-whitelist-header">
                                {intl.get({
                                  id: 'code-assets.containers.baseForm.FileWhitelist',
                                  defaultMessage: '• 文件白名单',
                                })}

                                <Balloon
                                  align="t"
                                  trigger={
                                    <YunxiaoIcon
                                      type="question-line"
                                      className="setting-card-help-icon"
                                    />
                                  }
                                  closable={false}
                                >
                                  <a
                                    type="primary"
                                    target="_blank"
                                    href={docs('fileWhitelistRules')}
                                    rel="noreferrer"
                                  >
                                    {intl.get({
                                      id: 'code-assets.containers.baseForm.HowDoIUseA',
                                      defaultMessage: '如何使用文件白名单？',
                                    })}
                                  </a>
                                </Balloon>
                              </div>
                              <div className="setting-card-action-whitelist-subtitle">
                                {intl.get({
                                  id: 'code-assets.containers.baseForm.YouCanAddFilesThat',
                                  defaultMessage: '支持将无需扫描的文件加入白名单',
                                })}
                              </div>
                              <div className="setting-card-action-row">
                                <Input.TextArea
                                  autoHeight
                                  hasLimitHint
                                  maxLength={3000}
                                  defaultValue={curItemObj.whitelist}
                                  value={this.state[item.key].value}
                                  className="setting-card-action-whitelist-text"
                                  placeholder={whitelistHolder}
                                  aria-label="Whitelist-TextArea"
                                  onChange={(value) => {
                                    this.setState({
                                      [item.key]: {
                                        value,
                                        changed: true,
                                        whitelistSaveLoading: false,
                                      },
                                    });
                                    this.handleEnabledBtn('sensitive_info_detection');
                                  }}
                                />
                              </div>
                              {this.state[item.key].message ? (
                                <div>
                                  <Message
                                    type="error"
                                    title={
                                      <span className="setting-card-action-whitelist-message">
                                        {this.state[item.key].message}
                                      </span>
                                    }
                                    shape="addon"
                                  />
                                </div>
                              ) : null}
                              <div className="setting-card-action-whitelist-tips-card">
                                <div className="setting-card-action-whitelist-tips">
                                  ？
                                  <span style={{ paddingLeft: '5px' }}>
                                    {intl.get({
                                      id: 'code-assets.containers.baseForm.MatchesAnyOneCharacterSuch',
                                      defaultMessage:
                                        '匹配任意1个字符，如：codeup/t?st.java 跳过 codeup/test.java 或 codeup/tast.java',
                                    })}
                                  </span>
                                </div>
                                <div className="setting-card-action-whitelist-tips">
                                  *
                                  <span style={{ paddingLeft: '11px' }}>
                                    {intl.get({
                                      id: 'code-assets.containers.baseForm.MatchesOrMoreCharactersFor',
                                      defaultMessage:
                                        '匹配0或多个字符，如：codeup/*.java 跳过 codeup 目录下所有 Java 文件',
                                    })}
                                  </span>
                                </div>
                                <div className="setting-card-action-whitelist-tips">
                                  **
                                  <span style={{ paddingLeft: '6px' }}>
                                    {intl.get({
                                      id: 'code-assets.containers.baseForm.MatchesOrMoreDirectoriesFor',
                                      defaultMessage:
                                        '匹配0或多个目录，如：**.java 跳过所有目录下的 Java 文件',
                                    })}
                                  </span>
                                </div>
                              </div>
                              <div className="setting-card-action-row" style={{ marginTop: 20 }}>
                                {this.renderWhitelistButton(item.key)}
                              </div>
                            </div>
                          </div>
                        ) : null}
                        {item.key === 'dependency_analysis' ? (
                          <div className="dependency-analysis">
                            <div className="dependency-analysis-params">
                              <div className="dependency-analysis-params-title">
                                {intl.get({
                                  id: 'code-assets.containers.baseForm.DetectionParameters',
                                  defaultMessage: '• 检测参数',
                                })}
                              </div>
                              <div className="dependency-analysis-params-tip">
                                {intl.get({
                                  id: 'code-assets.containers.baseForm.SupportsDependencyPackageVulnerabilityDetection',
                                  defaultMessage:
                                    '支持 Java 、Python、Golang、Node.js 等常见语言的依赖包漏洞检测。其中 Java 需编译后分析，请设置编译命令，否则将影响检测结果',
                                })}
                              </div>
                              <div className="dependency-analysis-params-form">
                                <Form field={this.dependency_field}>
                                  <Checkbox
                                    checked={langValue === 'Java'}
                                    onChange={this.onChangeLang}
                                    style={{ margin: '20px 0 0' }}
                                  >
                                    {intl.get({
                                      id: 'code-assets.containers.baseForm.SetJavaDetectionParameters',
                                      defaultMessage: '设置Java检测参数',
                                    })}
                                  </Checkbox>
                                  {langValue === 'Java' ? (
                                    <Form.Item
                                      label={intl.get({
                                        id: 'code-assets.containers.baseForm.Version',
                                        defaultMessage: '版本',
                                      })}
                                      {...{
                                        labelCol: {
                                          fixedSpan: 3,
                                        },

                                        wrapperCol: {
                                          span: 14,
                                        },
                                      }}
                                      style={{ marginTop: 20 }}
                                    >
                                      <Select
                                        style={{ width: '200px' }}
                                        {...this.dependency_field.init('build_language_version', {
                                          initValue: selectLangVersion || '',
                                          props: {
                                            onChange: () => {
                                              this.handleEnabledBtn('dependency_analysis');
                                            },
                                          },
                                        })}
                                      >
                                        {langValue && languageOptions[langValue]
                                          ? languageOptions[langValue].versions.map((version) => {
                                            return (
                                              <Select.Option value={version} key={version}>
                                                {version}
                                              </Select.Option>
                                            );
                                          })
                                          : null}
                                      </Select>
                                    </Form.Item>
                                  ) : null}
                                </Form>
                              </div>
                            </div>
                            {this.dependency_field.getValue('build_language') === 'Java' && (
                              <div className="dependency-analysis-script">
                                <div style={{ marginBottom: 12 }}>
                                  {intl.get({
                                    id: 'code-assets.containers.baseForm.CompileCommands',
                                    defaultMessage: '• 编译命令',
                                  })}
                                </div>
                                <div>
                                  <Editor
                                    {...this.dependency_field.init('build_script', {
                                      initValue: build_script || java_build_script,
                                      props: {
                                        onChange: () => {
                                          this.handleEnabledBtn('dependency_analysis');
                                        },
                                      },
                                    })}
                                    fileName={''}
                                    editorStyle={{ height: 110 }}
                                    size="small"
                                    theme="vs-dark"
                                  />
                                </div>
                              </div>
                            )}

                            <Button
                              type="primary"
                              onClick={this.saveDependencyForm}
                              style={{ marginTop: 20 }}
                              loading={this.state.submitting}
                              disabled={disabledBtnKeys.includes('dependency_analysis')}
                            // disabled={!(this.dependency_field.getValues().build_language && this.dependency_field.getValues().build_language_version)}
                            >
                              {intl.get({
                                id: 'code-assets.containers.baseForm.Save',
                                defaultMessage: '保存',
                              })}
                            </Button>
                          </div>
                        ) : null}

                        {item.key === 'precfix_detection' ||
                          item.key === 'coding_guidelines_detection' ? (
                            <Button
                              type="primary"
                              onClick={() => {
                                this.saveCodeQualityBtn(item.key);
                              }}
                              style={{ marginTop: 20 }}
                              loading={this.state.submitting}
                              disabled={disabledBtnKeys.includes(item.key)}
                            >
                              {intl.get({
                                id: 'code-assets.containers.baseForm.Save',
                                defaultMessage: '保存',
                              })}
                            </Button>
                          ) : null}
                      </div>
                    ) : null}
                  </div>
                );
              })}
            </div>
          )}
        </Section>
        {isModalOpen && (
          <GuaranteeModal
            isModalOpen={isModalOpen}
            taskName={taskName}
            taskKey={modalData.key}
            toogleService={this.props.toogleService}
            okFn={this.modalOkFn}
            closeFn={() => {
              this.setState({
                isModalOpen: false,
              });
            }}
          />
        )}
      </>
    );
  }
}
